<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <script src="libs/vue.js"></script>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="libs/element/index.css">
    <script src="libs/element/index.js"></script>
    <script src="libs/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="app">
    <el-container>

        <el-header>

            <el-row type="flex" class="row-bg animation" justify="center" style="border: 1px solid blue;" id="header">
                <el-col :span="2">
                    <!--拼接高度占位div-->
                    <div style="width: 100%; height: 100%;border: 1px solid blue; margin-top:5px;">
                        高度占位
                    </div>
                </el-col>

                <el-col :span="18">
                    <transition-group name="test2" tag="p">
                        <div v-show="rowItemsIsLoadFinish.header" key="header">
                            <h1>头部</h1>
                        </div>
                    </transition-group>
                </el-col>

            </el-row>

        </el-header>

        <el-main>


            <el-row class="animation" id="row_1">
                <el-col :span="2">
                    <!--拼接高度占位div-->
                    <div style="width: 100%; height: 700px;border: 1px solid blue; margin-top:5px;">
                        高度占位
                    </div>
                </el-col>
                <el-col :span="18">
                    <transition-group name="test2" tag="p">
                        <div style="border: 1px solid red;height: 700px" v-show="rowItemsIsLoadFinish.row_1"
                             key="row_1">
                            <div style="text-align: center">
                                <h1>哈哈,这是满格第一屏</h1>
                            </div>
                        </div>
                    </transition-group>
                </el-col>
            </el-row>

            <el-row type="flex" justify="center" class="animation" style="margin-top: 20px" id="row_2">
                <el-col :span="2">
                    <!--拼接高度占位div-->
                    <div style="width: 100%; height: 500px;border: 1px solid blue; margin-top:5px;">
                        高度占位
                    </div>
                </el-col>
                <el-col :span="20">

                    <transition-group name="test2" tag="p">
                    <div style="border: 1px solid red;height: 500px" key="row_2" v-show="rowItemsIsLoadFinish.row_2">
                        哈哈,这是第二屏
                    </div>
                    </transition-group>
                </el-col>
            </el-row>

            <el-row type="flex" justify="center" class="animation" style="margin-top: 20px" id="row_3">
                <el-col :span="10">
                    <div style="border: 1px solid red;height: 500px;max-wight:30px;">
                        哈哈,这是第三屏
                    </div>
                </el-col>
                <el-col :span="10">
                    <transition-group name="test2" tag="p">
                    <div style="border: 1px solid red;height: 100px;max-wight:30px;" key="row_3" v-show="rowItemsIsLoadFinish.row_3">
                        头部文字
                        <el-button type="primary" @click="initData">主要按钮</el-button>
                        <div style="height: 40px;border: 1px solid blue;margin-top:5px;padding:10px;"
                             v-for="item in items" class="item1" v-bind:key="item">
                            {{item}}
                        </div>
                    </div>


                    </transition-group>

                </el-col>
            </el-row>

            <el-row type="flex" justify="center" class="animation" style="margin-top: 20px" id="row_4">
                <el-col :span="4">
                    <!--拼接高度占位div-->
                    <div style="width: 100%; height: 100px;border: 1px solid blue; margin-top:5px;"
                         v-for="item in items2Data">
                        1{{ item.text }}
                    </div>
                </el-col>
                <el-col :span="18">
                    <div id="item2" style="margin-top: 0">
                        <transition-group name="test2" tag="p">
                            <div style="width: 100%; height: 100px;border: 1px solid blue; margin-top:5px;" key="row_4" v-show="rowItemsIsLoadFinish.row_4"
                                 v-for="item in items2Data" v-bind:key="item.id">
                                {{ item.text }}
                            </div>
                        </transition-group>
                    </div>

                </el-col>

            </el-row>

            </transition-group>
        </el-main>

        <el-footer>

            <el-row type="flex" justify="center" style="margin-top: 20px">
                底部内容
            </el-row>
        </el-footer>
    </el-container>

</div>

<script src="js/index2.js"></script>

</body>
</html>